<template>
  <div class="headline">
    <div class="headline_blank" @click="bank()">
      <img src="../../assets/image/fh.png" alt v-if="path != 'index'" />
    </div>
    <router-link :to="{ path: '/m_index' }" tag="div" class="headline_text">瑞鼎法拍</router-link>
    <div class="headline_img">
      <img src="../../assets/image/dl.png" alt @click="Onrouter" />
      <img src="../../assets/image/dh.png" alt @click="show = !show" />
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <router-link :to="{ path: '/m_index' }" tag="div">
          <img src="../../assets/image/sy.png" alt />
          <p>首页</p>
        </router-link>
        <router-link :to="{ path: '/all_home' }" tag="div">
          <img src="../../assets/image/qbfc.png" alt />
          <p>全部房产</p>
        </router-link>

        <router-link :to="{ path: '/m_map' }" tag="div">
          <img src="../../assets/image/dtzf.png" alt />
          <p>地图找房</p>
        </router-link>
        <router-link :to="{ path: '/mloan' }" tag="div">
          <img src="../../assets/image/fpdk.png" alt />
          <p>法拍贷款</p>
        </router-link>
        <router-link :to="{ path: '/m_broker' }" tag="div">
          <img src="../../assets/image/fpjl.png" alt />
          <p>法拍经理</p>
        </router-link>
        <router-link :to="{ path: '/helpme' }" tag="div">
          <img src="../../assets/image/bwzf.png" alt />
          <p>帮我找房</p>
        </router-link>
        <router-link :to="{ path: '/subscribe' }" tag="div">
          <img src="../../assets/image/mfdy.png" alt />
          <p>免费订阅</p>
        </router-link>
        <router-link :to="{ path: '/m_my' }" tag="div">
          <img src="../../assets/image/grzx.png" alt />
          <p>个人中心</p>
        </router-link>
      </div>
    </van-overlay>
  </div>
</template>
<script>
export default {
  props: ["path"],
  data() {
    return {
      show: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    bank() {
      this.$router.go(-1); //返回上一层
    },
    Onrouter() {
      let token = sessionStorage.getItem("token");
      if (token) {
        this.$router.push({
          name: "M_my"
        });
      } else {
        this.$router.push({
          name: "M_sign"
        });
      }
    },
    handleScroll() {
      let scrollY = document.documentElement.scrollTop;
      if (this.show == true) {
        if (scrollY > 10) {
          this.show = false;
        } else {
          this.show = true;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  overflow: hidden;
  border-radius: 0px 0px 50px 50px;
  background: #ffffff;
  padding-bottom: 0.37rem;
  div {
    float: left;
    width: 25%;
    margin-top: 0.33rem;
    img {
      width: 0.24rem;
      height: 0.26rem;
    }
    p {
      font-size: 0.13rem;
      color: #3f4447;
      line-height: 0.21rem;
    }
  }
}
.van-overlay {
  z-index: 10;
  top: 0.5rem;
}
.headline {
  display: flex;
  font-size: 0.16rem;
  text-align: center;
  height: 0.5rem;
  line-height: 0.5rem;
  overflow: hidden;
  .headline_text {
    flex: 1;
    text-align: center;
  }
  .headline_blank {
    padding-left: 0.2rem;
    width: 0.9rem;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    img {
      vertical-align: middle;
      width: 0.08rem;
    }
  }
  .headline_img {
    width: 0.9rem;
    text-align: right;
    img {
      height: 0.17rem;
      margin-right: 0.2rem;
      vertical-align: middle;
    }
  }
}
</style>
